<template>
	<view class="userinfo-content">
		<view class="cell-item">
			<view class="cell-item-title">头像</view>
			<image class="cell-avary" @click="choiceImg"
				:src="$IMG_URL+userInfo.avatar" mode=""></image>
		</view>
		<view class="cell-item">
			<view class="cell-item-title">姓名</view>
			<input type="text" v-model="userInfo.nickname" placeholder="请输入姓名">
		</view>
		<view class="cell-item">
			<view class="cell-item-title">性别</view>
			<input type="text" v-model="sex" placeholder="请输入性别">
		</view>
		<!-- <view class="cell-item">
			<view class="cell-item-title">手机号</view>
			<input type="text" v-model="userInfo.mobile" placeholder="请输入手机号">
		</view> -->
		<view class="cell-item">
			<!-- <view class="cell-item-title">推荐人</view> -->
			<view class="cell-item-title">邀请码</view>
			<input type="text" disabled v-model="userInfo.invitation_code">
		</view>
		<view class="detail-bottom-btn" @click="keepInfo">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				sex: '',
				imageAvar:''
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			//用户信息
			init() {
				this.$http('user.getuserdetails', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
						this.sex = this.userInfo.gender == 0 ? '女' : '男'
					}
				})
			},
			// 修改保存头像
			keepInfo() {
				let that = this;
				if (!that.userInfo.avatar) {
					uni.showToast({
						icon: 'none',
						title: '请上传头像'
					})
					return
				}
				if (!that.userInfo.nickname) {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					})
					return
				}
				if (!that.sex) {
					uni.showToast({
						icon: 'none',
						title: '请输入性别'
					})
					return
				}
				// if(!that.userInfo.mobile){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请输入手机号'
				// 	})
				// 	return
				// }
				that.$http('user.profile', {
					nickname: that.userInfo.nickname,
					avatar: that.userInfo.avatar,
					gender: that.sex == '女' ? 0 : 1,
				}, '提交中...').then(res => {
					if (res.code === 1) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						setTimeout(()=>{
							that.init()
						},1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: '修改失败'
						})
					}
				});
			},
			// 选择图片操作
			choiceImg() {
				uni.showActionSheet({
					itemList: ['拍照', '从手机相册选择'],
					success: res => {
						switch (res.tapIndex) {
							case 0:
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera'], //从相册选择
									success: ress => {
										this.uploadUserImg(ress.tempFilePaths[0]);
									}
								});
								break;
							case 1:
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['album'], //从相册选择
									success: ress => {
										this.uploadUserImg(ress.tempFilePaths[0])
									}
								});
								break;
							default:
								break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 裁剪完成后上传
			uploadUserImg(blob) {
				let that = this
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					// 	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					url: that.$API_URL + '/common/upload',
					filePath: blob,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: res => {
						uni.hideLoading();
						let imgData = JSON.parse(res.data)
						that.userInfo.avatar = imgData.data.url
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F7F9;
	}

	.cell-item {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		border-bottom: 3rpx solid #EEEEEE;
		justify-content: space-between;

		.cell-item-title {
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			margin: 20rpx 20rpx 0 0;
		}

		.cell-avary {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		input {
			width: 83%;
			height: 80rpx;
			text-align: right;
		}
	}

	.detail-bottom-btn {
		position: fixed;
		z-index: 200;
		bottom: 30rpx;
		width: 686rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #6AAE2B 0%, #1B7E38 100%);
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		left: 50%;
		transform: translate(-50%);
		border-radius: 50rpx;
	}
</style>